<template>
  <a-card :bordered="false">

    <s-table
      ref="table"
      rowKey="id"
      :showPagination="true"
      :columns="columns"
      :data="loadData"
    >
      <span slot="action" slot-scope="text, record">
        <a @click="edit(record)">编辑</a>
        <a-divider type="vertical"/>
        <a @click="permission(record.id)">授权</a>
      </span>
    </s-table>

    <role-modal ref="modal" @ok="refreshTable"></role-modal>
    <user-role-modal ref="userRoleModal"></user-role-modal>
  </a-card>
</template>

<script>
import { STable } from '@/components'
import { apiQueryRoleList } from '@/api/system'
import RoleModal from './modules/RoleModal'
import UserRoleModal from './modules/UserRoleModal'

const columns = [
  {
    title: '角色别名',
    align: 'center',
    dataIndex: 'roleAlias'
  },
  {
    title: '角色名称',
    align: 'center',
    dataIndex: 'roleName'
  }
]

export default {
  name: 'RoleUserList',
  components: {
    STable, RoleModal, UserRoleModal
  },
  data () {
    return {
      queryParam: {},
      columns,
      loadData: param => {
        return apiQueryRoleList(Object.assign(param, this.queryParam)).then(res => {
          return res
        })
      }
    }
  },
  methods: {
    add () {
      this.$refs.modal.show('新增')
    },
    edit (record) {
      this.$refs.modal.show('新增', record)
    },
    refreshTable () {
      this.$refs.table.refresh(true)
    },
    permission (id) {
      this.$refs.userRoleModal.show('角色权限配置', id)
    }
  }
}
</script>

<style scoped>

</style>
